<template>
	<div class="flex gap-[4px] mobile-menu__tab-wrapper">
		<base-router :name="item.id" v-for="item in list" :key="item.id" class="basis-1/2">
			<div
				@click.prevent="handleRoute(item)"
				class="flex justify-center items-center relative app-bg-react rounded-lg bg-bg-10 h-[36px]"
				:class="isActive(item.id) ? '!bg-primary text-t-1' : 'text-t-header'">
				<base-icon :name="item.icon" size="36" class="absolute left-0 opacity-20" />
				<base-text
					:text-t="item.textT"
					class="ml-1 uppercase"
					:class="small ? 'text-small' : 'text-base'"></base-text>
			</div>
		</base-router>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { BaseIcon, BaseText, BaseRouter } from '@/components/base'
import { useAppStore } from '@/store'

const appStore = useAppStore()

defineOptions({
	name: 'AppTabs'
})
defineProps({
	small: {
		type: Boolean,
		default: false
	}
})

const route = useRoute()
const router = useRouter()
const list = ref([
	{
		id: 'casino',
		textT: 'app.casino',
		icon: 'game2'
	},
	{
		id: 'sports',
		textT: 'app.sports',
		icon: 'sports'
	}
])

const isActive = (id: string) => {
	if (route.meta.category === id) {
		return true
	}
}
const handleRoute = (item: any) => {
	if (item.id === 'sports') {
		appStore.showTodo(true)
		return
	} else {
		router.push({ name: item.id, params: { locale: appStore.lang } })
	}
}
</script>
<style>
.mobile-menu__tab-wrapper {
	background: linear-gradient(180deg, #0b1462 0%, #1b2538 100%);
	padding: 12px 17px;
	border-bottom: 1px solid var(--color-border-1);
}
</style>
